<div class="row d-flex align-items-center item-link p-2 mt-2 bg-light-grey" (click)="loadDetails(indicator.code)">
    <div class="col-5">
        <a href="javascript:;;" class="text-link">
            {{ indicator.name }}
        </a>
    </div>
    <div class="col-7">
        <div class="row">
            <div *ngFor="let column of columns; let i = index" class="col numeric-column">
                <span *ngIf="column.showRating" [ngClass]="{'boldRating': column.boldRating}">
                    {{formatValue(indicator, column)}}
                </span>
                <span *ngIf="indicator[column.valueField] && indicator[column.valueField].clusterName" [ngClass]="{'boldRating': column.boldRating}">
                    {{indicator[column.valueField].clusterName}}
                </span>
            </div>
        </div>
    </div>
</div>

<app-modal [id]="'indicatorPillar' + getCleanIndicatorCode(indicator.code)" [size]="'modal-xl'">
    <div class="app-modal-header">
        Indicator Details
    </div>
    <div class="app-modal-body">
            <div class="container-fluid">
                <div class="row d-flex align-items-center">
                    <div class="col-sm-6">
                        <div class="indicator-name">
                            <span *ngIf="displayCode">{{ indicator.code | strReplace:'_':'.' }} </span>
                            {{ indicator.name }}
                        </div>
                    </div>
                    <div *ngIf="indicator.weightedScore" class="col-sm-6">

                        <div class="row d-flex align-items-center value">
                            <div class="col-3">
                                {{ indicator.score.value | number:'1.0-0' }}
                            </div>
                            <div class="col-3 offset-1">
                                {{ indicator.weight.value | number:'1.1-1' }}%
                            </div>
                            <div class="col-4 offset-1">
                                {{ indicator.weightedScore.value | number:'1.1-1' }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4">Raw Score</div>
                            <div class="col-4">Weight</div>
                            <div class="col-4">Weighted Score</div>
                        </div>
                    </div>
                </div>

                <div *ngIf="pillarDetails" class="row mt-5">
                    <div class="col-md-6">
                        <p [innerHtml]="pillarDetails.comment"></p>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th scope="col">Indicators</th>
                                    <th scope="col" class="text-right">Score</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let indicator of pillarDetails.indicators">
                                    <td scope="row">{{ indicator.name }}</td>
                                    <td class="text-right">{{ indicator.score | number }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
    </div>
</app-modal>
